<template>
  <div>
    <BasicTable @register="registerTable" />
  </div>
</template>

<script lang="ts" setup>
  import { BasicTable, useTable } from '@/components/Table';
  import { MerchantList } from '@/api/finance';
  import { getBasicColumns } from './tableData';
  import { IMerchantListResult } from '@/api/finance/type';
  import Dictionary from '@/utils/dictionary';

  const dicts = Dictionary.getLocalMulti(['rateType', 'merchantStatus']);

  const [registerTable] = useTable({
    title: '',
    api: MerchantList,
    columns: getBasicColumns(),
    rowKey: 'template_id',
    useSearchForm: true,
    formConfig: {
      labelWidth: 100,
      schemas: [
        {
          field: `orgName`,
          label: `商品名称`,
          component: 'Input',
          colProps: {
            span: 6,
          },
        },
        {
          field: `status`,
          label: `支付开通状态`,
          component: 'Select',
          colProps: {
            span: 6,
          },
          componentProps: {
            options: dicts.merchantStatus.map((item) => {
              return {
                label: item.dictLabel,
                value: item.dictValue,
                key: item.dictValue,
              };
            }),
          },
        },
      ],
    },
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    showIndexColumn: true,
    clickToRowSelect: false,
    afterFetch: (data: IMerchantListResult[]) => {
      return data.map((item) => {
        return {
          ...item,
          rateType: dicts.rateType.find((v) => v.dictValue == item.rateType)?.dictLabel,
          percentRate: item.percentRate + '%',
          status: dicts.merchantStatus.find((v) => v.dictValue == item.status)?.dictLabel,
        };
      });
    },
  });
</script>
